<template>
  <div class="music-card-contain">
    <!-- 歌单标题信息 -->
    <div class="music-banner clearfix">
      <img class="music-mask" src="../../static/images/1.jpg" alt="歌单封面" />
      <div class="music-title">
        When The Wind Blows
        <h1 class="author-title">允儿</h1>
        <div class="author-title">
          <span>2017-09-08</span>
          <span class="music-categories">POP流行</span>
          <div class="music-button">
            <a-button type="primary" shape="round">
              <a-icon type="right-circle" />
              <span>播放全部</span>
            </a-button>
            <a-button shape="round">
              <a-icon type="heart" />
              <span>收藏</span>
            </a-button>
            <a-button shape="round"><a-icon type="ellipsis" /> </a-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 导航栏 -->
    <div class="nav-part">
      <div
        v-for="(item, index) in Title"
        :key="index"
        :class="{ active: isActive === index }"
        class="nav-item"
        @click="isActive = index"
      >
        <div class="nav-link">
          {{ item.title }}
        </div>
      </div>
    </div>
    <!-- 歌曲单 -->
    <song-list v-if="isActive === 0"></song-list>
    <!-- 专辑信息 -->
    <song-message v-if="isActive === 1"></song-message>
    <!-- 评论 -->
    <song-comments v-if="isActive === 2"></song-comments>
  </div>
</template>
<script>
import SongList from './SongList'
import SongMessage from './SongMessage'
import SongComments from './SongComments'
export default {
  components: {
    SongList,
    SongMessage,
    SongComments
  },
  data() {
    return {
      isActive: 0,
      Title: [{ title: '歌曲' }, { title: '专辑信息' }, { title: '评论' }]
    }
  }
}
</script>
<style scoped>
.music-mask {
  width: 160px;
  height: 160px;
  margin-left: 50px;
  margin-top: 30px;
  border-radius: 5px;
  float: left;
}
/* 伪元素清除浮动 */
.clearfix:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  /* 触发 hasLayout */
  zoom: 1;
}
.music-title {
  font-size: 37px;
  font-weight: 700;
  margin-top: 20px;
  margin-left: 30px;
  float: left;
}
.author-title {
  font-size: 13px;
  font-weight: 500;
}
.music-categories {
  display: inline-block;
  margin-left: 10px;
}
.music-button {
  margin-top: 10px;
}
.nav-part {
  display: flex;
  justify-content: space-around;
  /* padding-bottom: 1rem; */
  position: sticky;
  top: 0;
  z-index: 999;
  background: #f0f2f5;
}
.nav-part .nav-item {
  margin-top: 10px;
  border-bottom: 3px solid transparent;
  padding-bottom: 0.2rem;
}
.nav-part .active {
  color: #1890ff;
  border-bottom: 3px solid #1890ff;
}
.nav-part .nav-link:hover {
  color: #1890ff;
  cursor: pointer;
}
</style>
